<!--
 * @Author: maomao
 * @Date: 2021-04-09 21:46:36
 * @Description: 分頁
 * @FilePath: \dictionary-web\src\views\pagination.vue
-->
<template>
  <div
    style="display: flex; justify-content: flex-end"
    v-if="page && page.count > 0"
  >
    <el-pagination
      layout="prev, pager, next"
      @current-change="currentChange"
      :current-page="currentPage"
      :total="count"
      :page-size="pageSize"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ElPagination } from "element-plus";
import { Emit, Prop } from "vue-property-decorator";
import { Tool } from "../utils/tool";

export interface PageInfo {
  count?: number;
  index?: number;
  pageSize?: number;
  readonly pageCount?: number;
}

@Options({
  components: {
    ElPagination,
  },
})
export default class Pagination extends Vue {
  @Prop()
  page: PageInfo;
  @Prop({default: 0})
  firstPage: number;

  get count(): number {
    if (this.page) {
      let c = Tool.convertToNumber(`${this.page.count}`);
      console.log(`总数:${c}`);
      return c;
    }
    return 0;
  }

  get pageSize() {
    if (this.page) {
      let size = Tool.convertToNumber(`${this.page.pageSize}`);
      console.log(`每页尺寸:${size}`);
      return size;
    }
    return 0;
  }

  /**当前分页*/
  get currentPage(): number {
    if (this.page) {
      let pageIndex = Tool.convertToNumber(`${this.page.index}`) - this.firstPage + 1;
      console.log(`当前索引:${pageIndex}`);
      return pageIndex;
    }
    return 0;
  }

  @Emit("update:page")
  updatePage(v) {}

  currentChange(v: number) {
    v = v -1 + this.firstPage;
    let pageInfo = Tool.assign(this.page, { index: v < 0 ? 0 : v });
    this.updatePage(pageInfo);
  }
}
</script>

<style lang="scss">
</style>
